export default {
  name: 'PlayAudio',
  props: {
    playAudioObj: {
      type: Object,
      required: true,
    }
  },
  data() {
    return {
      //歌曲url
      songUrl: '',
      //未加载url时按钮不可点击
      hasUrl: true,
      //audio dom
      origin: '',
      //音频播放状态
      audioisplay: false,
      //歌曲时间
      songDuration: 0,
      songDurationmin: 0,
      songDurationsec: 0,
      //歌曲当前时间
      currentTime: 0,
      currentTimemin: 0,
      currentTimesec: 0,
      //进度条宽度
      progressWidth: 0,
      //歌曲时间变动定时器
      songTimer: '',
      //进度条左边距变动定时器
      progressTimer: '',
    }
  },
  mounted() {
    this.origin = this.$refs.originAudio
  },
  watch: {
    'playAudioObj.isclick'() {
      if(this.songUrl==''){
        this.init()
      }else{
        this.playOrPause()
      }
    },
    'playAudioObj.songUrl'(v) {
      //将传入的url赋值给当前url
      this.songUrl = v
      this.init()
    },
    // 'playAudioObj.audioisplay'(v) {
    //   if (v) {
    //       this.origin.play()
    //       this.progressBar()
    //   } else {
    //     this.origin.pause()
    //     clearInterval(this.progressTimer)
    //   }
    //   this.audioisplay=v
    //   this.$emit('SongState', this.audioisplay)
    // }
    
  },
  methods: {
    init() {
      this.progressWidth = 0
      this.hasUrl = false
      //监听可以播放时播放音频
      this.origin.addEventListener('canplaythrough', () => {
        //  音频播放
        this.origin.play()
        // 获得歌曲总时长，单位秒
        this.songDuration = this.origin.duration
        this.$emit('GetSongDuration', this.songDuration)
        // 设置音量
        this.origin.volume = 0.2
        this.GetSongTime()
        this.progressBar()
        this.audioisplay = true
        this.$emit('SongState', this.audioisplay)
      })
    },
    // 播放按钮
    playOrPause() {
      //this.$store.commit("changeSongState",!this.$store.state.global.songState);
      if (this.origin.paused) {
        //暂停时点击播放
        this.origin.play()
        //重新创建歌曲滚动条定时器
        this.progressBar()
      } else {
        this.origin.pause()
        // 清除歌曲滚动条定时器
        clearInterval(this.progressTimer)
      }
      this.audioisplay = !this.audioisplay
      this.$emit('SongState', this.audioisplay)
    },
    //获得歌曲时长信息
    GetSongTime() {
      //总时长除以60，向下取整，获得歌曲总分钟数
      this.songDurationmin = Math.floor(this.songDuration / 60)
      //总时长对60取余，四舍五入得除去分钟数剩余秒数
      this.songDurationsec = Math.round(this.songDuration % 60)
      // 秒数小于10前面加字符0，如显示为09
      if (this.songDurationsec < 10) {
        this.songDurationsec = '0' + this.songDurationsec
      }
      // 当前歌曲时间定时器
      this.songTimer = setInterval(() => {
        // 获得歌曲当前时间
        this.currentTime = this.origin.currentTime
        this.currentTimemin = Math.floor(this.currentTime / 60)
        this.currentTimesec = Math.round(this.currentTime % 60)
        if (this.currentTimesec < 10) {
          this.currentTimesec = '0' + this.currentTimesec
        }
        // 当前时间秒数为60时，显示为00，并使分钟数加一
        if (this.currentTimesec == 60) {
          this.currentTimesec = '00'
          this.currentTimemin++
        }
        // 当前时间等于总时长时，按钮变为暂停状态
        if (this.currentTime == this.songDuration) {
          this.audioisplay = false
          this.$emit('SongState', this.audioisplay)
          clearInterval(this.progressTimer)
        }
      }, 1000)
    },
    // 进度条滚动
    progressBar() {
      clearInterval(this.progressTimer)
      //总长度1000px
      this.progressTimer = setInterval(() => {
        this.progressWidth += 1000 / this.songDuration / 10
      }, 100);
    },
    //鼠标按下
    volumeMouse(e) {
      //获得点击块
      let ball = e.target
      //获得音量区域
      let strip = this.$refs.strip
      let bW = ball.offsetWidth
      let bL = ball.offsetLeft
      let sW = strip.offsetWidth
      let sL = strip.offsetLeft
      // e.pageX-1260为点击块距离父元素左边距，1260为父元素块距离页面左边距
      let disX = e.pageX - 1260 - bL
      document.onmousemove = (e) => {
        let deviationX = e.pageX - 1260 - disX
        // 显示球不超出
        if (e.pageX - 1260 - sL - bW / 2 < 0) {
          ball.style.left = 0 + 'px'
        } else if (e.pageX - 1260 + bW / 2 - sW - sL > 0) {
          ball.style.left = sW - bW + 'px'
        } else {
          ball.style.left = deviationX + 'px'
          // 控制音量上下限,放在这里控制鼠标不抬起时动态控制音量
          if (deviationX / sW > 1) {
            this.origin.volume = 1
          } else if (deviationX / sW < 0) {
            this.origin.volume = 0
          } else {
            this.origin.volume = deviationX / sW
          }
        }
      }
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
      };
    },

    progressMouse(e) {
      // 获得点击区域
      let ball = this.$refs.ball
      //获得点击区域的父元素
      let progress = this.$refs.progress
      //点击子元素的宽度和距离父元素的左边距
      let bW = ball.offsetWidth
      // let bL = ball.offsetLeft

      // 父元素的宽度和距离它有定位的父元素的左边距
      let pW = progress.offsetWidth
      let pL = progress.offsetLeft
      document.onmousemove = (e) => {
        //防止超出
        if (e.pageX - pL - bW / 2 < 0) {
          this.progressWidth = 0
        } else if (e.pageX + bW / 2 - pW - pL > 0) {
          this.progressWidth = pW - bW
        } else {
          this.progressWidth = e.pageX - pL
        }
      }
      document.onmouseup = (e) => {
        document.onmousemove = null;
        document.onmouseup = null;
        this.origin.currentTime = this.songDuration * this.progressWidth / (pW - bW)
        this.$emit('GetCurrentTime', this.origin.currentTime)
      }
    },
    // 虚拟进度条上的点击事件
    progressfake(e) {
      // 获得点击区域
      let ball = this.$refs.ball
      //获得点击区域的父元素
      let progress = this.$refs.progress
      //点击子元素的宽度和距离父元素的左边距
      let bW = ball.offsetWidth
      // let bL = ball.offsetLeft
      // 父元素的宽度和距离它有定位的父元素的左边距
      let pW = progress.offsetWidth
      let pL = progress.offsetLeft
      this.progressWidth = e.pageX - pL
      this.origin.currentTime = this.songDuration * this.progressWidth / (pW - bW)
      this.$emit('GetCurrentTime', this.origin.currentTime)
    }
  }
}
